<template>
  <!-- 歌手页面顶部 -->
  
    <!-- <div class="attention-inner">
      <div class="inner-top">
        <span>我关注的歌手</span>
      </div>
      <div class="inner-bottom">
        <swiper
          :modules="modules"
          :loop="true"
          :slides-per-view="5"
          :autoplay="{ delay: 2000, disableOnInteraction: false }"
          navigation
          :pagination="{ clickable: true }"
        >
          <swiper-slide>
            <img src="../../image/pkq.jpg" alt="皮卡丘1" class="slide-img" />
          </swiper-slide>
          <swiper-slide>
            <img src="../../image/pkq.jpg" alt="皮卡丘1" class="slide-img" />
          </swiper-slide>
          <swiper-slide>
            <img src="../../image/pkq.jpg" alt="皮卡丘1" class="slide-img" />
          </swiper-slide>
          <swiper-slide>
            <img src="../../image/pkq.jpg" alt="皮卡丘1" class="slide-img" />
          </swiper-slide>
          <swiper-slide>
            <img src="../../image/pkq.jpg" alt="皮卡丘1" class="slide-img" />
          </swiper-slide>
        </swiper>
      </div>
    </div> -->
    <!-- 登录后没有关注歌手显示 -->
    <div class="context-inner">
      <h2 class="inner-one">
        <span class="text-one">你关注的歌手将展示在这里</span>
      </h2>
      <div class="inner-two">
        <span class="text-two">快速起歌,想听就听</span>
      </div>
    </div>

</template>

<script lang="ts">
export default {
  name: 'MBanner',
}
</script>

<script lang="ts" setup>
import 'swiper/css'
import { Swiper, SwiperSlide } from 'swiper/vue'
import { Navigation, Pagination, Scrollbar, Autoplay } from 'swiper'
import 'swiper/css/navigation'
import 'swiper/css/pagination'
import 'swiper/css/scrollbar'
const modules = [Navigation, Pagination, Autoplay]
</script>

<style scoped>

.attention_inner {
  width: 1200px;
  margin: 0 auto;
}
.inner-top {
  text-align: center;
  padding: 60px 0 44px;
  line-height: 22px;
  font-size: 18px;
  color: #fff;
}

/* 没有关注歌手时显示的页面 */
.context-inner {
  margin: 0 auto;
  text-align: center;
}
.inner-one {
  font-size: 60px;
  font-weight: 200;
}
.text-one {
  display: inline-block;
  margin-top: 146px;
  color: #fff;
}
.text-two {
  display: inline-block;
  font-size: 25px;
  color: #e2e2e2;
  margin-top: 10px;
}
</style>
<style>
.inner-bottom {
  margin: 0 auto;
}
.swiper {
  width: 750px;
}
.swiper-slide {
  width: 150px !important;
  height: 150px;
}
.slide-img {
  width: 150px;
  height: 150px;
  filter: grayscale(100%);
}
.slide-img:hover {
  filter: grayscale(0%);
}
</style>
